<template>
	<view class="box">

		<!-- <view :style="{height:navBarHeight+ 'px'}" class="z-1 bar-box padding-l-r-25"></view> -->
		<u-sticky>
			<view class="bg-white">
				<u-navbar :safeAreaInsetTop="true" :placeholder="true" backgroundColor="#fff">
					<view class="u-nav-slot align-items-center" slot="left">
						<u-icon name="arrow-left" size="20" @click="back"></u-icon>
						<view class="search-box margin-l-10 padding-l-r-20 align-items-center fs-28">
							<u-icon name='search' size="20" color="#707070"></u-icon>
							<input type="search" class="flex-1" v-model="keywords" @confirm="search"
								placeholder="请输入关键字">
							<view class="line-box"></view>
							<text @click="search">搜索</text>
						</view>
					</view>
				</u-navbar>
				<view class="linear-box  z-1 ">
					<view class="align-items-center padding-l-r-30 sort-box">
						<view class="align-items-center" @click="getSort(1)">
							<text class="fs-26 color-333 margin-r-10">综合</text>
							<u-icon name="arrow-up" color="#707070" size="14" v-if="sortType==1"></u-icon>
							<u-icon name="arrow-down" color="#707070" size="14" v-else></u-icon>
						</view>
						<view class="align-items-center" @click="getSort(2)">
							<text class="fs-26 color-333 margin-r-10">销量</text>
							<u-icon name="arrow-up" color="#707070" size="14" v-if="sortType==2"></u-icon>
							<u-icon name="arrow-down" color="#707070" size="14" v-else></u-icon>
						</view>
						<view class="align-items-center" @click="getSort(3)">
							<text class="fs-26 color-333 margin-r-10">价格</text>
							<u-icon name="arrow-up" color="#707070" size="14" v-if="sortType==3"></u-icon>
							<u-icon name="arrow-down" color="#707070" size="14" v-else></u-icon>
						</view>
						<view class="flex-1"></view>
						<view class="img-box">
							<image src="/static/image/shop/sort.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="type-box align-items-center padding-l-r-30">
						<view v-for="(item,index) in typeList" :class="{'active':index == typeIndex }"
							@click="getType(index)">
							{{item}}
						</view>
					</view>
					<view class="sortType-box">
						<view class="sortType-list bg-white padding-30" v-show="sortType ==1">
							<view class="color-0 fs-26 justifyContent-spaceBetween align-items-center"
								:class="{'active':sortIndex==1}" @click="setSort(1)">
								<text>综合排序</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
							<view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center"
								@click="setSort(2)" :class="{'active':sortIndex==2}">
								<text>新品优先</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="sortType-list bg-white padding-30" v-show="sortType ==2">
							<view class="color-0 fs-26 justifyContent-spaceBetween align-items-center"
								:class="{'active':sortIndex==3}" @click="setSort(3)">
								<text>从高到低</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
							<view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center"
								@click="setSort(4)" :class="{'active':sortIndex==4}">
								<text>从低到高</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
						</view>
						<view class="sortType-list bg-white padding-30" v-show="sortType ==3">
							<view class="color-0 fs-26 justifyContent-spaceBetween align-items-center"
								:class="{'active':sortIndex==5}" @click="setSort(5)">
								<text>从高到低</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
							<view class="color-0 fs-26 margin-t-10 justifyContent-spaceBetween align-items-center"
								@click="setSort(6)" :class="{'active':sortIndex==6   }">
								<text>从低到高</text>
								<image src="/static/image/shop/selected.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>

			</view>
		</u-sticky>
		<view class="popular-recommendations padding-t-b-30">
			<waterFall ref="waterFall" :carIndex="1"></waterFall>
		</view>
		<view class='pop-box z-0' @click="getSort(0)" v-show="sortType >0"></view>
	</view>
</template>

<script>
	import waterFall from '@/components/waterfall/index.vue';
	export default {
		components: {
			waterFall
		},
		data() {
			return {
				navBarHeight: '',
				typeList: ['饮品', '保健器材'],
				typeIndex: 0,
				sortIndex: 0,
				selectType: 0,
				sortType: 0,
				keywords: '',
				order_sort: '',
				order_field: ''
			}
		},
		onShow() {
			this.getBarHeight()
		},
		onLoad() {
			this.$nextTick(() => {
				// 确保在这里访问 $refs 是安全的
				const myRef = this.$refs.waterFall;
				if (myRef) {
					this.$refs.waterFall.initList()
				}
			});
		},
		methods: {
			getBarHeight() {
				const systemInfo = uni.getSystemInfoSync();
				// 获取状态栏高度
				const statusBarHeight = systemInfo.statusBarHeight;

				// 微信小程序默认导航栏高度（单位为 px）
				const defaultNavBarHeight = 44;

				// 总体头部导航栏高度（包含状态栏）
				this.navBarHeight = statusBarHeight + defaultNavBarHeight;

			},
			back() {
				uni.navigateBack()
			},
			getType(index) {
				this.typeIndex = index;
			},
			search() {
				this.$refs.waterFall.initList({
					keywords: this.keywords,
					order_field: this.order_field,
					order_sort: this.order_sort
				})
			},
			setSort(index) {
				this.sortIndex = index;
				let order_field = '',
					order_sort = ''
				if (index == 1) {
					order_field = 'weigh'
					order_sort = 'desc'
				} else if (index == 2) {
					order_field = 'createtime'
					order_sort = 'desc'
				} else if (index == 3) {
					order_field = 'sales'
					order_sort = 'desc'
				} else if (index == 4) {
					order_field = 'sales'
					order_sort = 'aesc'
				} else if (index == 5) {
					order_field = 'price'
					order_sort = 'desc'
				} else if (index == 6) {
					order_field = 'price'
					order_sort = 'aesc'
				}
				this.order_field = order_field
				this.order_sort = order_sort
				this.search()
			},
			getSort(index) {
				this.sortType = index;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		width: 460rpx;
		height: 60rpx;
		background: #F7F7F7;
		border-radius: 30rpx;
		border: 1px solid #DBDBDB;

		input {
			height: 100%;
			font-size: 28rpx;
		}

		.line-box {
			width: 1px;
			height: 40rpx;
			margin: 0 16rpx;
			background: #DBDBDB;

		}

		text {
			color: #12B5CF;
		}
	}

	.sort-box {
		height: 70rpx;
		margin-top: 10rpx;

		.align-items-center {
			margin-right: 110rpx;
		}

		.img-box {
			width: 30rpx;
		}
	}

	.linear-box {
		background: #FFF;
	}

	.type-box {
		height: 70rpx;

		view {
			height: 46rpx;
			padding: 0 20rpx;
			margin-right: 20rpx;
			background: #F7F7F7;
			border-radius: 10rpx;
			line-height: 44rpx;
			font-size: 26rpx;
			color: #4d4d4d;
			border: 1px solid #F7F7F7;
		}

		.active {
			background: #F5FDFF;
			border: 1px solid #43ABC4;
			line-height: 44rpx;
			color: #43ABC4;
			;
		}
	}

	.popular-recommendations {
		padding-top: -1px;
	}

	.sortType-box {
		position: absolute;
		left: 0;
		top: 70rpx;
		width: 100%;

		.sortType-list {
			width: 100%;
			height: 200rpx;
			border-radius: 0 0 30rpx;
		}

		.align-items-center {
			height: 52rpx;
		}

		.active {
			image {
				display: block;
			}
		}

		image {
			display: none;
			width: 40rpx;
			height: 40rpx;
		}
	}

	.pop-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>